<!DOCTYPE html>
<html>
<head>
    <title>Non-Inverting Amplifier Circuit</title>
</head>
<body>

<canvas id="circuitCanvas" width="650" height="480"></canvas>

<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Helper Drawing Functions ---

    function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }

    function drawResistor(x1, y1, x2, y2, label) {
        const w = 12; // width of resistor box
        const h = 40; // height of resistor box
        ctx.textAlign = 'center';

        if (y1 === y2) { // Horizontal resistor
            const x_center = (x1 + x2) / 2;
            const y_center = y1;
            drawLine(x1, y1, x_center - h / 2, y_center);
            ctx.strokeRect(x_center - h / 2, y_center - w / 2, h, w);
            drawLine(x_center + h / 2, y_center, x2, y2);
            ctx.fillText(label, x_center, y_center - w / 2 - 12);
        } else { // Vertical resistor
            const x_center = x1;
            const y_center = (y1 + y2) / 2;
            drawLine(x1, y1, x_center, y_center - h / 2);
            ctx.strokeRect(x_center - w / 2, y_center - h / 2, w, h);
            drawLine(x_center, y_center + h / 2, x2, y2);
            ctx.textAlign = 'left';
            ctx.fillText(label, x_center + w / 2 + 5, y_center);
            ctx.textAlign = 'center';
        }
    }
    
    function drawArrow(x1, y1, x2, y2, headlen = 10) {
        const angle = Math.atan2(y2 - y1, x2 - x1);
        drawLine(x1, y1, x2, y2);
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    function drawTerminal(x, y, radius = 4) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
        ctx.fillStyle = 'black';
    }

    function drawJunction(x, y, radius = 3) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
    }

    function drawGround(x, y) {
        drawLine(x, y, x, y + 10);
        drawLine(x - 15, y + 10, x + 15, y + 10);
        drawLine(x - 10, y + 15, x + 10, y + 15);
        drawLine(x - 5, y + 20, x + 5, y + 20);
    }


    // --- Main Drawing ---

    // Define Coordinates
    const groundY = 380;
    const opampBaseX = 280;
    const opampTipX = 400;
    const opampTopY = 120;
    const opampBottomY = 280;
    const opampCenterY = 200;
    const invertingY = 160;
    const nonInvertingY = 240;
    const feedbackNodeX = 180;
    const vinX = 80;
    const outputBranchX = 480;
    const voutTermX = 580;
    const feedbackTopY = 80;

    // Draw Ground Line
    drawLine(vinX - 30, groundY, voutTermX + 20, groundY);

    // Draw Op-Amp
    ctx.beginPath();
    ctx.moveTo(opampBaseX, opampTopY);
    ctx.lineTo(opampBaseX, opampBottomY);
    ctx.lineTo(opampTipX, opampCenterY);
    ctx.closePath();
    ctx.stroke();
    ctx.font = '22px Arial';
    ctx.fillText('-', opampBaseX + 20, invertingY);
    ctx.fillText('+', opampBaseX + 20, nonInvertingY);
    ctx.font = '16px Arial';
    ctx.fillText('+5.0 V', 340, 115);
    ctx.fillText('-5.0 V', 340, 295);

    // Draw Non-Inverting Input (V_IN)
    drawLine(vinX, nonInvertingY, opampBaseX, nonInvertingY);
    drawTerminal(vinX, nonInvertingY);
    drawArrow(vinX, groundY, vinX, nonInvertingY + 10);
    ctx.textAlign = 'right';
    ctx.fillText('V', vinX - 10, (groundY + nonInvertingY) / 2);
    ctx.font = '12px Arial';
    ctx.fillText('IN', vinX, (groundY + nonInvertingY) / 2 + 3);
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';

    // Draw Inverting Input and Feedback Loop
    drawLine(feedbackNodeX, invertingY, opampBaseX, invertingY);
    drawJunction(feedbackNodeX, invertingY);

    // Draw 800 Ohm Resistor
    drawResistor(feedbackNodeX, invertingY + 15, feedbackNodeX, groundY, '800 Ω');
    drawLine(feedbackNodeX, invertingY, feedbackNodeX, invertingY + 15)
    drawJunction(feedbackNodeX, groundY);

    // Draw 4.0 kOhm Feedback Resistor
    drawLine(feedbackNodeX, invertingY, feedbackNodeX, feedbackTopY);
    drawResistor(feedbackNodeX + 15, feedbackTopY, opampTipX - 15, feedbackTopY, '4.0 kΩ');
    drawLine(feedbackNodeX,feedbackTopY,feedbackNodeX + 15, feedbackTopY);
    drawLine(opampTipX - 15, feedbackTopY, opampTipX, feedbackTopY);
    drawLine(opampTipX, feedbackTopY, opampTipX, opampCenterY);
    drawJunction(opampTipX, opampCenterY);

    // Draw Output Wires
    drawLine(opampTipX, opampCenterY, outputBranchX, opampCenterY);
    drawJunction(outputBranchX, opampCenterY);
    drawLine(outputBranchX, opampCenterY, voutTermX, opampCenterY);
    drawTerminal(voutTermX, opampCenterY);

    // Draw V_OUT Label
    drawArrow(voutTermX + 20, groundY, voutTermX + 20, opampCenterY + 10);
    ctx.textAlign = 'left';
    ctx.fillText('V', voutTermX + 30, (groundY + opampCenterY) / 2);
    ctx.font = '12px Arial';
    ctx.fillText('OUT', voutTermX + 38, (groundY + opampCenterY) / 2 + 3);
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';

    // Draw LED and Resistor R branch
    const led_top_y = opampCenterY + 20;
    const led_bottom_y = led_top_y + 30;
    const led_width = 25;
    drawLine(outputBranchX, opampCenterY, outputBranchX, led_top_y);
    // Diode Symbol
    ctx.beginPath();
    ctx.moveTo(outputBranchX - led_width / 2, led_top_y);
    ctx.lineTo(outputBranchX + led_width / 2, led_top_y);
    ctx.lineTo(outputBranchX, led_bottom_y);
    ctx.closePath();
    ctx.stroke();
    // Light Arrows
    ctx.save();
    ctx.translate(outputBranchX + led_width / 2 + 2, led_top_y + 15);
    ctx.rotate(Math.PI / 6);
    drawArrow(0, 0, 15, 0, 6);
    ctx.translate(2, 5);
    ctx.rotate(-Math.PI / 3.5);
    drawArrow(0, 0, 15, 0, 6);
    ctx.restore();

    // Draw Resistor R
    drawResistor(outputBranchX, led_bottom_y + 15, outputBranchX, groundY, 'R');
    drawLine(outputBranchX, led_bottom_y, outputBranchX, led_bottom_y+15);
    drawJunction(outputBranchX, groundY);

    // Draw Ground Symbol
    drawGround(groundY-10, groundY);

    // Draw Figure Caption
    ctx.fillText('Fig. 7.1', 325, 450);

</script>

</body>
</html>